// 引入useEffect
// useEffect的作用: 模拟类组件中的挂载, 更新和卸载三个钩子
import React, { useEffect, useState } from 'react'

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min)
  max = Math.floor(max)
  return Math.floor(Math.random() * (max - min + 1)) + min //含最大值，含最小值
}
export default function App() {
  // 这里才是顶级作用域
  const [c, setC] = useState(0)
  useEffect(() => {
    // 这个函数模拟了两个生命周期钩子: 分别是挂载和更新
    console.log('挂载或更新')

    return () => {
      // 这个函数模拟了一个生命周期钩子: 卸载
      console.log('卸载')
    }
  }, [c])

  return (
    <div>
      App
      <p>{c}</p>
      <button
        onClick={() => {
          setC(getRandomIntInclusive(1, 2))
        }}
      >
        +
      </button>
    </div>
  )
}
